<template>
	<view v-if="loaded" class="row full-width tabs">
		<defect-tab-bar class="tab-bar" v-model="tabIndex" :tabs="tabs" :type="tabBarType" :clearable="false" @input="handleTabChange" @sort-change="handleTabSortChange" />
		<button class="flex-shrink0 tabs-add-button" size="mini" plain="true" @click="handleOpenPopup"><uni-icons type="plusempty" size="15"></uni-icons></button>
	</view>
</template>

<script>
	import { delTabs } from "@/api/system/DefectTabs";
	import { configDefect } from "@/api/system/defect";
	import { getDefectTempTab, removeDefectTempTab } from "@/utils/defect";
	import DefectTabBar from "@/components/defect/defect-tab-bar/index.vue"
	import { DEFECT_TAB_BAR_TYPE } from '@/utils/defect.js'
	
	/** 记录Tab标签选项 */
	const DEFECT_TAB_CACHE_KEY='defect-tab';
	/** 名称等于所有选项的name */
	const ALL_TAB_NAME = 'all-tab';
	
	export default {
		name: 'DefectQueryTabs',
		components: { DefectTabBar },
		data() {
			return {
				tabIndex: 2,
				// 缺陷配置
				config:{
					types: [],
					states: []
				},
				// 所有tab的名称
				allTab: ALL_TAB_NAME,
				// 当前缺陷的tab页名
				activeDefectTabName: ALL_TAB_NAME,
				// 新建标签的表单数据
				form: {
					config: {
						moduleId: 0,
						handleBy: [],
						params: {
							collect: false,
							defectStates: []
						}
					}
				},
			}
		},
		props: {
			projectId: {
				type: Number,
				default: 0
			}
		},
		computed: {
			/** 是否加载完成  */
			loaded() {
				return (this.$i18n && this.$i18n.locale)?true:false;
			},
			/** 查询标签名称集合  */
			tabNames() {
				return [
					...(this.config&&this.config.tabs)?this.config.tabs.map(t=>t.tabName):[],
					...[this.$i18n.t('defect.all-defect')]
				]
			},
			/** 标签集合  */
			tabs() {
				const allTab = {
					tabId: ALL_TAB_NAME,
					tabName: this.$i18n.t('defect.all-defect')
				}
				return (this.config&&this.config.tabs)?[...this.config.tabs,allTab]:[allTab];
			},
			/** 标签类型  */
			tabBarType() {
				return DEFECT_TAB_BAR_TYPE.RADIO;
			}
		},
		created() {
			this.getDefectConfig();
		},
		methods: {
			/** 重新加载标签  */
			reload() {
				this.getDefectConfig();
			},
			/** 打开弹框  */
			handleOpenPopup() {
				this.$tab.navigateTo('/subpackage/pages/system/defect/defect-tab');
			},
			/** 处理标签改变事件  */
			handleTabChange(index, tab) {
				this.$emit('input', tab);
			},
			/** 处理标签顺序改变事件  */
			handleTabSortChange(data) {
				if(this.config&&this.config.tabs && data) {
					const tabMap = new Map(this.config.tabs.map(item => [item.tabId, item]));
					this.config.tabs = data.map(t=>{
						return tabMap.get(t.tabId);
					});
				}
			},
			/** 获取当前用户缺陷配置 */
			getDefectConfig() {
				configDefect().then(res=>{
					this.config = res.data;
					// 如果页面传的参数有tab，代表有临时查询
					const tab = getDefectTempTab(); // 获取临时缓存tab
					if(tab){
						// removeDefectTempTab();
						this.config.tabs = this.config.tabs || [];
						this.config.tabs.unshift(tab);
						this.activeDefectTabName = tab.tabId+'';
					} else if(this.config.tabs) {
						// 从本地缓存取激活的页标签名称
						this.activeDefectTabName = uni.getStorageSync(DEFECT_TAB_CACHE_KEY); // || ALL_TAB_NAME;
						// 查看所有页标签里是否保护激活页标签，如果没有，设置页标签为"全部"
						if(!this.activeDefectTabName || this.config.tabs.filter(t=>t.tabId+''==this.activeDefectTabName).length==0) {
							this.activeDefectTabName = this.allTab;
						}
					}
				// 执行激活页标签方法
				// this.selectDefectTabHandle();
				})
			},
			/** 切换页标签 */
			selectDefectTabHandle() {
			  if(this.config && this.config.tabs) {
				let tab = this.config.tabs.find(t=>t.tabId==this.activeDefectTabName);
				if(tab && tab.config) {
				  tab.config.isAsc = 'desc';
				  tab.config.orderByColumn = 'updateTime';
				  if(!tab.config.params) {
					tab.config.params = {
					  defectStates: []
					};
				  }
				  this.queryParams = tab.config;
				} else {
				  this.reset();
				}
				this.handleQuery();
			  }
			  uni.setStorageSync(DEFECT_TAB_CACHE_KEY, this.activeDefectTabName);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		background-color: $uni-bg-color;
		margin-top: 0;
		justify-content: flex-start;
		align-items: center;
		>.tabs-add-button {
			border-width: 0;
			margin: 0;
			padding-top: 20rpx;
		}
		>.tab-bar {
			flex: 1;
			padding-left: 20rpx;
			padding-top: 20rpx;
		}
	}
</style>